<template>
    <view>
        <!--  -->
        <view class="top"></view> 
        <view class="b">
            <van-image id="img" round width="5rem" height="5rem"
            :src="imgSrc"/>
            <view class="zi">松拉马</view>
            <van-radio-group class="xuan"  :value="radio" @click="onChange">
                <van-radio  name="1">
                    <text class="danxuan">使用钱包喜茶钱包支付(您还未开通喜茶钱包)</text>
                </van-radio>
            </van-radio-group>
        </view>
        <!--  -->
        <view class="bot">
            <view></view>
            <view class="ci">此二维码可累计积分(不支持付款)</view>
            <van-image width="10rem" height="10rem" fit="contain"
            :src="imgSrc2"/>
            <view class="zizi">会员码每30秒自动刷新一次</view>
        </view>
    </view>
</template>
<script>
export default {
    data(){
        return{
            radio: '2',
            imgSrc:'http://101.37.175.158:8888/images/touxiang.jpg',
            imgSrc2:'http://101.37.175.158:8888/images/erweima.jpg'
        }
    },
    methods:{
        onChange(){
            console.log(11)
        }
    }
}

</script>
<style scoped>
.top{
    width: 100%;
    height: 350rpx;
    background-color: #404040;
    /* color: #9B9B9B; */
}
.b{
    text-align: center;
    position: relative;
    height: 300rpx;
    border-bottom: 1px solid #EFEFEF;
}
.danxuan{
    color: #9B9B9B;
    font-size: 12px;
}
#img{
    position: absolute;
    top: -80rpx;
    left: 41%;
}
.zi{
    position: absolute;
    top: 100rpx;
    left: 43%;
    font-size: 20px;
}
.xuan{
    position: absolute;
    left: 11%;
    top: 220rpx;
}
.ci{
    margin-top: 100rpx;
    text-align: center;
    margin-bottom: 20rpx;
}
.bot{
    text-align: center;
}
.zizi{
    font-size: 12px;
    color: #9EA2A8;
}
</style>

